﻿@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime
@inject IOptions<WebsiteOptions> WebsiteOption

<header class="navbar navbar-expand navbar-dark flex-column flex-md-row px-3">
    <div class="header-img navbar-brand">
        <img src="_content/BootstrapBlazor.Shared/images/logo.png" />
        <span>Bootstrap Blazor</span>
    </div>
    <div class="navbar-nav-scroll">
        <ul class="navbar-nav bd-navbar-nav flex-row">
            <li class="nav-item">
                <a class="nav-link " href="index">@HomeText</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="introduction">@IntroductionText</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="components">@ComponentsText</a>
            </li>
            <li class="nav-item d-none d-md-flex">
                <a class="nav-link" href="@WebsiteOption.Value.ServerUrl">server</a>
            </li>
            <li class="nav-item d-none d-md-flex">
                <a class="nav-link" href="@WebsiteOption.Value.WasmUrl">wasm</a>
            </li>
            <li class="nav-item d-none d-xl-flex">
                <a class="nav-link" href="http://ccflow.org/?from=blazor">@FlowText</a>
            </li>
        </ul>
    </div>
    <CultureChooser class="flex-md-fill justify-content-md-end" />
    <ul class="navbar-nav ms-3 d-none d-lg-flex">
        <li class="nav-item">
            <a class="nav-link p-2" href="https://github.com/ArgoZhang/BootstrapBlazor"><img src="_content/BootstrapBlazor.Shared/images/git.svg" /></a>
        </li>
        <li class="nav-item">
            <a class="nav-link p-2" href="https://gitee.com/LongbowEnterprise/BootstrapBlazor"><img src="_content/BootstrapBlazor.Shared/images/gitee.svg" /></a>
        </li>
    </ul>
    <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" target="_blank" href="https://gitee.com/LongbowEnterprise/BootstrapBlazor/repository/archive/main.zip">@DownloadText</a>
</header>

@Body

<div class="ms-learn" data-bs-toggle="tooltip" data-bs-placement="left" title="@Title" @ref="MsLearnElement">
    <a href="@WebsiteOption.Value.WikiUrl" target="_blank">
        <img src="_content/BootstrapBlazor.Shared/images/log.svg" />
    </a>
</div>

<ThemeChooser />

@if (Installable)
{
    <div class="install-prompt">
        <div class="row">
            <div class="install-prompt-body col-10 col-offset-2 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
                <span class="ms-2">@InstallAppText</span>
                <button class="installButton btn btn-primary" @onclick="@InstallClicked">@InstallText</button>
                <button class="cancelButton btn btn-danger" @onclick="@(() => Installable = false)">@CancelText</button>
            </div>
        </div>
    </div>
}
